<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jCaramel.css"/>
		<link rel="stylesheet" type="text/css" href="css/icons.css"/>
		<script src="js/jquery-1.4.2.min.js"></script>
		<script src="js/jCaramel-core-1.0.js"></script>
		<script src="js/jCaramel-toolbar-1.0.js"></script>
		<style>
			body{
				font-family:"Lucida Sans Unicode"
			}
			button{
			margin:3em 2em;
			}
			.icon-16 { background-image:url(css/icons-16.png) }
		</style>
		<script>
			
			var tb;
			
			$(function(){
				
				tb = $('ul:first');
				tb.toolbar({});
				
			});
		</script>
	</head>
	<body>
		<form onsubmit="return false">
			<button onclick="tb.toolbar('orientation', 'horizontal')">Horizontal</button>
			<button onclick="tb.toolbar('orientation', 'vertical')">Vertical</button>
			<button onclick="tb.toolbar('labels', true)">Show Labels</button>
			<button onclick="tb.toolbar('labels', false)">Hide Labels</button>
		</form>
		<ul>
			<li><div class="icon-16 icon-file"></div><span>New</span></li>
			<li><div class="icon-16 icon-open"></div><span>Open</span>
				<ul>
					<li><div class="icon-16 icon-open"><span>Open File</span></li>
					<li><div class="icon-16 icon-open"><span>Open URL</span></li>
					<li><div class="icon-16 icon-open"><span>Open Recent</span></li>
					<li><div class="icon-16 icon-open"><span>Open Existing content</span></li>
				</ul>
			</li>
			<li><div class="icon-16 icon-save"></div><span>Save</span></li>
			<li><div class="icon-16 icon-undo"></div><span>Undo</span></li>
			<li><div class="icon-16 icon-redo"></div><span>Redo</span></li>
			<li><div class="icon-16 icon-indent"></div><span>Indent</span></li>
			
		</ul>
	</body>
</html>